<template>
  <el-card class="box-card">
    <el-card class="content">
      <div class="head">
        <span class="s-head-font">头像</span>
        <!--上传头像-->
        <el-upload name="file" :action="action" :headers="headers" :show-file-list="false" :before-upload="beforeUpload" :on-success="success" accept=".jpg, .jpeg, .png">
          <el-avatar :size="60" :src="userInfo.Face | toFaceUrl" title="点击头像上传">
            <el-avatar icon="el-icon-user-solid" :size="60"></el-avatar>
          </el-avatar>
        </el-upload>
      </div>
      <el-form :model="userForm" status-icon :rules="rules" ref="userForm">
        <!--修改资料的表单-->
        <el-form-item prop="name" label="昵称">
          <el-input v-model="userForm.name" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item prop="sign" label="签名">
          <el-input v-model="userForm.sign" placeholder="请输入签名"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center;">
          <el-button class="setting-btn" type="primary" @click="modify('userForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-card>
</template>

<script>
import { mapActions } from "vuex";
import{ getUserInfo,modifyInfo } from '@/api/user'
import { toFaceUrl, uploadFace } from "@/utils/url";
import Cookies from 'js-cookie'
export default {
  data() {
    return {
      userForm: {
        name: "",
        sign: "",
      },
      rules: {
        name: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        sign: [{ max: 30, message: "不能超过 30 个字符", trigger: "blur" }],
      },
      action: uploadFace,
      headers: {
        Authorization:
          "Bearer " + Cookies.get('token'),
      },
    };
  },
  computed: {
    userInfo() {
      if (Cookies.get('userInfo')) {
        return JSON.parse(Cookies.get('userInfo'));
      } else {
        return null;
      }
    },
  },
  methods: {
    ...mapActions(["setUserInfo"]),
    beforeUpload(file) {
      const isType = file.type === ("image/jpeg" || "image/png");
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isType) {
        this.$message.error("格式只能是jpg/jpeg/png格式!");
        return false;
      }
      if (!isLt1M) {
        this.$message.error("图片大小不能超过 1MB!");
        return false;
      }
      return true;
    },
    success() {
      //重新获取用户信息
      getUserInfo().then((response) => {
        this.setUserInfo(response.data.data.user);
      });
      this.$router.go(0);
    },
    modify(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          modifyInfo(this.userForm).then((res) => {
            if (res.data.code === 200) {
              //重新获取用户信息
              getUserInfo().then((response) => {
                this.setUserInfo(response.data.data.user);
                this.$router.go(0)
              });
            } else {
              this.$message.error("修改失败");
            }
          });
        } else {
          this.$message.error("请检查输入的数据");
        }
      });
    },
    init() {
      this.userForm.name = this.userInfo.Name
      this.userForm.sign = this.userInfo.Sign;
    },
  },
  created() {
    this.init();
  },
  filters: {
    toFaceUrl(name) {
      return toFaceUrl(name);
    },
  },
};
</script>

<style>
.box-card {
  height: 500px;
}
.content {
  width: 600px;
  margin: auto;
}
.head {
  display: flex;
}

.s-head-font {
  margin-top: 12px;
  margin-right: 20px;
  color: #808080;
}

.setting-btn{
  width: 180px;
}
</style>